﻿
@{
    ViewBag.Title = "VideoSetting";
}
<style>
    .td-text-center {
        text-align: center;
    }
</style>
<div class="title-content">视频设置</div>
<div class="row">
    <div class="col-md-12">
        <!-- BEGIN EXAMPLE TABLE PORTLET-->
        <div class="portlet light ">
            <div class="portlet-body">
                <div class="dataTables_wrapper no-footer">
                    <div class="row">
                        <div class="col-md-3 col-sm-6">
                            <div class="btn-group">
                                <a class="btn sbold green" href="#addVideo" onclick="addLoading()" data-toggle="modal">新增视频设备</a>
                            </div>
                        </div>
                        <div class="col-md-3 col-sm-6">
                            <label>
                                显示条数 <select id="changePageSize" onchange="pageSizeChange()" class="form-control input-sm input-xsmall input-inline">
                                    <option value="5">5</option>
                                    <option value="10">10</option>
                                    <option value="20">20</option>
                                </select>
                            </label>
                        </div>
                    </div>
                    <div class="table-scrollable">
                        <table class="table table-striped table-bordered table-hover order-column dataTable no-footer" role="grid">
                            <thead>
                                <tr role="row">
                                    <th style="width: 200px;">班级名称 </th>
                                    <th style="width: 200px;">视频标题 </th>
                                    <th class="td-text-center" style="width: 80px;">直播地址 </th>
                                    <th class="td-text-center" style="width: 80px;">观看状态 </th>
                                    <th class="td-text-center" style="width: 100px;">设备序号 </th>
                                    <th class="td-text-center" tabindex="0" style="width: 127px;"> 操作设置 </th>
                                </tr>
                            </thead>
                            <tbody id="gridTable"></tbody>
                        </table>
                        <script id="grid" type="text/html">
                            <% for(var i=0;i
                            <list.length;i++){ %>
                                <% var item=list[i]; %>
                                <tr class="gradeX" role="row" id="<%=item.classId %>">
                                    <td><%=item.className %></td>
                                    <td><%=item.videoTitle %></td>
                                    <td class="td-text-center"><%=item.checkVideo=="1"?"已获取":"地址空" %></td>
                                    <td class="td-text-center"><%=item.state=="1"?"可以":"禁止" %></td>
                                    <td class="td-text-center"><%=item.deviceSerialNo %></td>
                                    <td class="td-text-center">
                                        <a class="btn btn-sm green" href="#addVideo" onclick="Setting('<%= item.id %>')" data-toggle="modal">设置</a>
                                        <a class="btn btn-sm red" onclick="DelVideo('<%= item.id %>')">删除</a>
                                    </td>
                                </tr>
                                <%}%>
                        </script>
                    </div>
                    <div class="row">
                        <div class="col-md-5 col-sm-5"><div class="dataTables_info" id="data_info">显示 1 到 10 共 0 条</div></div>
                        <div class="col-md-7 col-sm-7">
                            <!--加载分页控件-->
                            @Html.Partial("DataPager")
                        </div>
                    </div>
                </div>
            </div>
            <!-- END EXAMPLE TABLE PORTLET-->
        </div>
    </div>
</div>


<!--编辑设备-->
<div id="addVideo" class="modal fade" tabindex="-1" data-focus-on="input:first" data-width="600">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
        <h4 class="modal-title"><span id="editType">编辑</span>视频设备</h4>
    </div>
    <div class="modal-body">
        <div action="#" class="form-horizontal" role="form">
            <div class="form-group" text-align:center;>
                <label for="inputEmail1" class="col-md-4 control-label">所属班级</label>
                <div class="col-md-6">
                    <select aria-hidden="true" tabindex="-1" id="txtclassid" class="form-control"></select>
                </div>
            </div>
            <div class="form-group" text-align:center;">
                <label class="control-label col-md-4">视频标题</label>
                <div class="col-md-6">
                    <input type="text" id="txtvideoTitle" class="form-control">
                </div>
            </div>
            <div class="form-group" text-align:center;">
                <label class="control-label col-md-4">设备序号</label>
                <div class="col-md-6">
                    <input type="text" id="txtdeviceSerialNo" class="form-control">
                </div>
            </div>
            <div class="form-group" text-align:center;">
                <label class="control-label col-md-4">直播地址</label>
                <div class="col-md-6">
                    <input type="text" id="txtVideoURL" class="form-control">
                </div>
            </div>
            <div class="form-group" text-align:center;">
                <label class="control-label col-md-4">视频封面图片地址</label>
                <div class="col-md-6">
                    <input type="text" id="videoImgURL" class="form-control">
                </div>
            </div>
            <div class="form-group" text-align:center;">
                <label class="control-label col-md-4">观看状态</label>
                <div class="col-md-6">
                    <select id="viewState" class="form-control">
                        <option value="1">可以观看</option>
                        <option value="0">禁止观看</option>
                    </select>
                </div>
            </div>
        </div>
    </div>
    <div class="modal-footer">
        <button hidden="hidden" id="videoId"></button>
        <button hidden="hidden" id="classId"></button>
        <button type="button" data-dismiss="modal" id="closeModel" class="btn btn-outline dark">关闭</button>
        <button type="button" class="btn green" onclick="Submit()">提交</button>
    </div>
</div>


<script>
    $(document).ready(function () {
        GridData();
        BindClass();
    });

    //绑定班级
    function BindClass() {
        AjaxCustom({
            url: "/VideoSetting/SelectClass",
            type: "post",
            showLoading: true,//是否显示遮罩层
            callBack: function (obj) {
                var sel = $("#txtclassid");
                sel.append(new Option("------请选择------", ""));
                sel.append(new Option("所有班级", "ALL"));
                for (var i = 0; i < obj.data.length; i++) {
                    sel.append(new Option(obj.data[i].className, obj.data[i].id))
                }
                $("#txtclassid").val("");
            }
        });
    }

    //显示新增
    function addLoading() {
        $("#editType").html("新增");
        $("#videoId").val("");
        $("#txtclassid").val("");
        $("#txtvideoTitle").val("");
        $("#txtdeviceSerialNo").val("");
        $("#txtVideoURL").val("");
        $("#videoImgURL").val("");
    }

    //保存
    function Submit() {
        var editType = $("#editType").html();
        var deviceSerial = $("#txtdeviceSerialNo").val();
        var videoTitle = $("#txtvideoTitle").val();
        var classId = $("#txtclassid").val();
        var viewState = $("#viewState").val();//观看状态
        var videoURL =$("#txtVideoURL").val();//直播地址 
        var videoImgURL =$("#videoImgURL").val();//视频图片

        if (deviceSerial == undefined || deviceSerial == "") {
            AlertMsg("摄像头序列号必填");
            $("#txtdeviceSerialNo").focus();
            return;
        }
        if (deviceSerial.indexOf(' ') != -1) {
            AlertMsg("摄像头序列号不能包含空格");
            $("#txtdeviceSerialNo").select();
            return;
        }
        var paramesData = {
            id: $("#videoId").val(),
            classId: classId,
            videoTitle: videoTitle,
            state: viewState,
            deviceSerialNo: deviceSerial,
            videoURL: videoURL,
            coverImgURL: videoImgURL
        }
        if (editType == "新增") {
            AjaxCustom({
                url: "/VideoSetting/Insert",
                type: "post",
                showLoading: true,//是否显示遮罩层
                loadingMsg: "正在保存",
                parames: paramesData,
                callBack: function (data) {
                    if (data.code == 1) {
                        $("#closeModel").click();//隐藏弹出层
                        AlertMsg("新增成功");
                        pageIndex = 1;
                        GridData();
                    } else if (data.code == 2) {
                        AlertMsg("此设备序列号已存在");
                        $("#txtdeviceSerialNo").select();
                    } else if (data.code == 3) {
                        AlertMsg("此设备序列号必填");
                        $("#txtdeviceSerialNo").select();
                    }
                    else {
                        AlertMsg(data.data);
                    }
                }
            });
        } else {
            AjaxCustom({
                url: "/VideoSetting/UpdateVideo",
                type: "post",
                showLoading: true,//是否显示遮罩层
                loadingMsg: "正在保存",
                parames: paramesData,
                callBack: function (data) {
                    if (data.code == 1) {
                        $("#closeModel").click();//隐藏弹出层
                        AlertMsg("修改成功");
                        pageIndex = 1;
                        GridData();
                    } else if (data.code == 2) {
                        AlertMsg("此设备序列号已存在");
                        $("#txtdeviceSerialNo").select();
                    } else if (data.code == 3) {
                        AlertMsg("此设备序列号必填");
                        $("#txtdeviceSerialNo").select();
                    } else {
                        AlertMsg(data.data);
                    }
                }
            });
        }
    }

    //改变页大小
    function pageSizeChange() {
        var count = $("#changePageSize").val();
        pageSize = count;
        pageIndex = 1;
        GridData();
    }

    //设置
    function Setting(videId) {
        $("#editType").html("编辑");
        AjaxCustom({
            url: "/VideoSetting/VideoInfo",
            type: "post",
            showLoading: false,//是否显示遮罩层
            parames: { videId: videId },
            callBack: function (data) {
                $("#videoId").val(data.data[0].id);
                $("#txtclassid").val(data.data[0].classId);
                $("#txtvideoTitle").val(data.data[0].videoTitle);
                $("#viewState").val(data.data[0].state);
                $("#txtdeviceSerialNo").val(data.data[0].deviceSerialNo);             
                $("#txtVideoURL").val(data.data[0].videoURL);
                $("#videoImgURL").val(data.data[0].coverImgURL);
            }
        });
    }

    //查询表格数据
    function GridData() {
        pageSize = $("#changePageSize").val();//页行数
        AjaxCustom({
            url: "/VideoSetting/VideoSettingPageList",
            type: "post",
            showLoading: true,//是否显示遮罩层
            parames: { pageIndex: pageIndex, pageSize: pageSize },
            callBack: function (obj) {
                var start = (obj.data.pageIndex - 1) * pageSize + 1;
                var end = obj.data.pageIndex * pageSize;
                $("#TotalCount").html(obj.data.total);//总行数
                if (obj.data.total == 0) {
                    $("#data_info").html("");
                    $("#gridTable").html("<tr><td colspan=\"6\" style='text-align:center;'><b style='color:red;'>暂无数据</b></td></tr>");
                    document.getElementById('paging1').innerHTML = "";//分页控件代码为空
                } else {
                    if (pageIndex == obj.data.pageCount) {
                        $("#data_info").html("显示 " + start + " 到 " + obj.data.total + " 共 " + obj.data.total + " 条");
                    } else {
                        $("#data_info").html("显示 " + start + " 到 " + end + " 共 " + obj.data.total + " 条");
                    }
                    //加载数据
                    var gridData = template('grid', obj.data);
                    $("#gridTable").html(gridData);
                    //加载分页控件
                    loadPager(obj.data.pageIndex, obj.data.pageCount);
                }
            }
        });
    }

    //删除摄像头
    function DelVideo(vId) {
        var isTrue = confirm("确认删除该摄像头吗？");
        if (isTrue) {
            AjaxCustom({
                url: "/VideoSetting/DeleteVideo",
                type: "post",
                showLoading: false,//是否显示遮罩层
                parames: { videoId: vId },
                callBack: function (obj) {
                    if (obj.code == 1) {
                        AlertMsg("删除成功");
                        GridData();
                    } else {
                        AlertMsg(obj.data);
                    }
                }
            });
        }
    }


</script>
